<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <form action="" method="post" enctype="application/x-www-form-urlencoded">
			
			<input type="submit" value=""/>
		</form> -->
		用户名：<input type="text" class="username" />
		<button class="btn">点击我发送postAjax请求</button>
		<script type="text/javascript">
			var btn = document.querySelector(".btn");
			var usernameEle = document.querySelector(".username");
			// 1.post传递数据的时候需要设置请求头部 request header
			// 2.传递参数 get 传参是通过地址栏 post传参是通过 send
			btn.onclick = function(){
				var username = usernameEle.value;
				// 1.创建ajax对象
				let xhr = new XMLHttpRequest();
				xhr.open("POST","./post.php",true);
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
				xhr.onload = function(){
					// console.log(xhr.responseText);
					let res = JSON.parse(xhr.responseText);
					console.log(res);
					
				}
				let data = `username=${username}&age=20`;
				xhr.send(data);
				
			}
			
			
			
			
			
			
		</script>
	</body>
</html>
